<template>
    <div class="sub-info none">
        <div class="sub-info-title">
            <div>
                <span>学习经历</span>
                <span @click="addAction" class="add-style" v-if="id != -1 && id">+</span>
            </div>


            <div>
                <el-button
                        :disabled="id == -1 || !id"
                        @click="deleteAction"
                        plain
                        class="delete-btn">删除
                </el-button>
                <el-button
                        :disabled="id == -1 || !id"
                        type="primary"
                        @click="handleClick(edit)">
                    {{edit ? '保存' : '编辑'}}
                </el-button>
            </div>
        </div>
        <el-form
                :rules="rules"
                label-position="left"
                ref="form"
                :model="form"
                label-width="80px"
                class="resume-form">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="培训机构" prop="institution">
                        <el-input placeholder="请输入培训机构" v-model="form.institution" :disabled="!edit" clearable>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="培训课程" prop="course">
                        <el-input placeholder="请输入培训课程" v-model="form.course" :disabled="!edit" clearable>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <div  class="small-input">
                        <el-form-item label="培训时间" prop="startTime">
                            <el-date-picker
                                    :picker-options="pickerOptions1"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    :disabled="!edit"
                                    prefix-icon=""
                                    v-model="form.startTime"
                                    type="date"
                                    placeholder="请选择">
                            </el-date-picker>
                            <span class="bar">-</span>
                        </el-form-item>

                        <el-form-item label="" prop="endTime" label-width="0" >
                            <el-date-picker
                                    :picker-options="pickerOptions2"
                                    :required="isHaveTo"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    :disabled="form.toDay || !edit"
                                    prefix-icon=""
                                    v-model="form.endTime"
                                    type="date"
                                    placeholder="请选择">
                            </el-date-picker>
                            <el-checkbox v-model="form.toDay" class="check-style" :disabled="!edit">至今</el-checkbox>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="12"></el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="培训内容" prop="content">
                        <el-input
                                :disabled="!edit"
                                type="textarea"
                                placeholder="请输入培训内容"
                                v-model="form.content"
                                maxlength="500"
                                show-word-limit
                                rows="6"
                        >
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
    export default {
        props: ['learnForms','index','id'],
        data() {
            let salaryPass = (rule,value,callback) => {
                let reg = /^[0-9]*$/;
                if(value < 0){
                    callback(new Error("不能为负数"));
                } else if (value  && !reg.test(value)) {
                    callback(new Error("请输入整数"));
                } else if(!value){
                    callback();
                }else if(String(value).length > 5000000 ){
                    callback(new Error("不能多于5000000字"));
                }else {
                    callback();
                }
            }
            let validateName = (rule, value, callback) => {
                if (!value && this.isHaveTo) {
                    callback(new Error("请输入结束日期"));
                } else {
                    callback();
                }
            }
            return {
                pickerOptions1:{},
                pickerOptions2:{},
                edit: false,
                options:[],
                form: {
                    id: '',
                    institution: '',
                    toDay: false,
                    course: '',
                    startTime: '',
                    endTime: '',
                    content: ''
                },
                rules: {
                    institution: [
                        { required: true, message: '请输入培训机构', trigger: 'blur' },
                        { max: 20, message: '最多输入20字', trigger: 'blur' }
                    ],
                    course: [
                        { required: true, message: '请输入培训课程 ', trigger: 'blur' },
                        { max: 20, message: '最多输入20字', trigger: 'blur' }
                    ],
                    startTime: [
                        { required: true, message: '请选择开始日期', trigger: 'blur' }
                    ],
                    endTime: [
                        { validator: validateName , trigger: 'blur'},
                    ],
                    content: [
                        { required: true, message: '请输入培训内容', trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
            handleClick(edit) {
                if(edit) {
                    this.$refs['form'].validate((valid) => {
                        if (valid) {
                            let temp = JSON.parse(JSON.stringify(this.form));
                            this.id ? temp.resumeId = this.id : '';
                            this.$emit('updateResume',temp,4,this.index)
                            this.edit = !this.edit;
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                } else {
                    this.edit = !this.edit;
                }

            },
            addAction() {
                this.$emit('addItem',this.index,4)
            },
            deleteAction() {
                this.$emit('deleteItem',this.index,4,this.form);
            }
        },
        watch: {
            'learnForms.length': {
                handler(newValue, oldValue) {
                    this.form = {...this.form, ...this.learnForms[this.index]};
                }
            },
            'form.toDay': function(val) {
                if(val) {
                    let _field = this.$refs['form'].fields
                    _field.map(i => {
                        if(i.prop === 'endTime'){
                            this.form.endTime = ""
                            i.clearValidate()
                        }
                    })
                } else {
                    let _field = this.$refs['form'].fields
                    _field.map(i => {
                        if(i.prop === 'endTime'){
                            i.validate()
                        }
                    })
                }
            },
            learnForms: {
                handler(newName, oldName) {
                    console.log(this.learnForms,newName);
                    
                    this.form = {...this.form, ...newName[this.index]};
                    console.log(this.form);
                    
                },
                immediate: true
            },
        },
        computed: {
            isHaveTo() {
                return !this.form.toDay;
            }
        },
        created() {
            this.form = {...this.form, ...this.learnForms[this.index]};
            this.pickerOptions1.disabledDate = (time)=> {
                if(this.form.endTime) {
                    return  time.getTime() > new Date(this.form.endTime) ||time.getTime() > Date.now()
                } else {
                    return time.getTime() > Date.now()
                }

            }
            this.pickerOptions2.disabledDate = (time)=> {
                if(this.form.startTime) {
                    return  time.getTime() < new Date(this.form.startTime) ||time.getTime() > Date.now()
                } else {
                    return time.getTime() > Date.now()
                }
            }
        }
    };
</script>
<style lang="css" scoped>
    .sub-info {
        background: #ffffff;
    }
    .sub-info-title {
        display: flex;
        justify-content: space-between;
        padding: 0 44px;
        background: #ffffff;
        height: 62px;
        align-items: center;
    }
    .sub-info-title div {
        width: 160px;
        display: flex;
    }
    .sub-info-title span:first-child:after {
        width: 28px;
        height: 2px;
        background: #1893FC;
        content: "";
        display: block;
        margin-top: 3px;
    }
    .sub-info-title .el-button {
        padding: 0;
        width:94px;
        height:24px;
        line-height: 24px;
        box-sizing: border-box;
        background: #1893FC;
    }
    .sub-info-title .delete-btn {
        background: #ffffff;
        border-color: #1893FC;
        color: #1893FC;
    }
    .resume-form {
        padding: 0 58px;
    }
    .el-row>.el-col-12:last-child {
        display: flex;
        justify-content: flex-end;
    }
    .bar {
        padding-left: 10px;
    }
    .add-style {
        color: #ffffff;
        width: 13px;
        height: 13px;
        background: #1893FC;
        text-align: center;
        line-height: 13px;
        border-radius: 50%;
        margin-left: 14px;
        margin-top: 5px;
        cursor: pointer;
    }
</style>
